﻿/// <reference path="~/app/libs/sencha-touch-debug.js" />
Ext.define("iMobileS.view.ProductsContainer", {
    extend: "Ext.Container",
    alias: "widget.productscontainer",
    initialize: function () {
        this.callParent(arguments);

        var backbutton = {
            xtype: "button",
            text: "Back",
            ui: "back",
            handler: this.onBackToCategories,
            scope: this
        }

        //Define for top toolbar
        var topToolbar = {
            xtype: "toolbar",
            title: 'Choices Products',
            docked: "top",
            items: [
                backbutton,
                {
                    xtype: "spacer"
                }
            ]
        };

        //Header
        var headerPanel = {
            xtype: "panel",
            layout: "hbox",
            style: "padding: 7px; 7px 0px 7px",
            docked: "top",
            items: [
                {
                    flex: 1,
                    xtype: "panel",
                    cls: "check-out-text",
                    html: "<div>Yes, send me the following Product Reports.</div>"
                }, {
                    flex: 1,
                    xtype: "panel",
                    width: 93,
                    items: [
                        {
                            xtype: "button",
                            text: "Check out",
                            ui: "decline",
                            width: 90,
                            cls: "check-out-button",
                            handler: this.onCheckOutClick,
                            scope: this
                        }
                    ]
                }
            ]
        };

        //Products
        var products = {
            xtype: "products",
            store: Ext.getStore("Products"),
            floating: true,
            width: "100%",
            height: "100%",
            ui: "round",
            listeners: {
                disclose: { fn: this.onProductsDiscloseChanged, scope: this },
                itemtap: { fn: this.onProductsSelectedChanged, scope: this }
            }
        };


        this.add([topToolbar, headerPanel, products]);
    },
    onBackToCategories: function () {
        this.fireEvent("onBackToCategories", this);
    },
    onProductsDiscloseChanged: function (list, record, target, index, evt, options) {
        this.fireEvent("onProductsDiscloseChanged", list, record, target, index, evt, options);
    },
    onProductsSelectedChanged: function (list, index, e, options) {
        this.fireEvent('onProductsSelectedChanged', list, index)
    },
    config: {
        layout: {
            type: 'fit'
        },
        fullscreen: true
    },
    onCheckOutClick: function () {
        this.fireEvent("onCheckOutClick", this);
    }
});